<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="./superPannel/vue.min.js"></script>
</head>
<style>
  #app {
    display: flex;
    align-items: center;
  }
  .input {
    width: 200px;
    height: 26px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0 6px;
  }
  .save-btn {
    width: 50px;
    height: 26px;
    margin-left: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
</style>
<body>
  <div id="app">
    超级面板呼起快捷键设置：<input placeholder="请输入快捷键，默认是Ctrl+P" class="input" v-model="superPanelHotKey" />
    <div class="save-btn" @click="saveHotKey"> 保存 </div>
  </div>
</body>
<script>
  const id = 'rubick-system-super-panel-store'
  new Vue({
    el: '#app',
    data() {
      return {
        superPanelHotKey: 'Ctrl+W'
      }
    },
    created() {
      this.superPanelHotKey = window.rubick.dbStorage.getItem(id) || 'Ctrl+W';
    },
    methods: {
      saveHotKey() {
        window.rubick.dbStorage.setItem(id, this.superPanelHotKey);
      }
    }
  });
</script>
</html>
